<template>
  <div class='flex-col' style='width: 100%;'>
    <card-title text='基本信息' />
    <div class='flex-col' style='padding-bottom: 100px;'>
      <div :class="['flex-row cell', i%2===0?'grey':'']" v-for='(item,i) in listDict'>
        <span class='label'>{{ item.label }}：</span>
        <span class='value' v-if='item.customRender'>{{ templateDict(item.customRender, formData[item.key]) || '-'
          }}</span>
        <span class='value' v-else>{{ formData[item.key] || '-' }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import CardTitle from '@/views/project/components/CardTitle.vue'
import { detail } from '@/api/projectInitApply'

const dicts = {
  unitRender: (source) => {
    if (source) {
      return source.map(v => v.value).join('、')
    } else return '-'
  },
  tofRender: (source) => source ? '有' : '无',
  projectSourceDict: (source) => {
    const options = [
      { label: '国家省部级', value: 0 },
      { label: '集团公司级', value: 1 },
      { label: '海油发展重大专项', value: 2 },
      { label: '海油发展重点攻关', value: 3 },
      { label: '海油发展常规', value: 4 },
      { label: '采油公司级', value: 5 }
    ]
    const res = options.filter(obj => obj.value == source)
    if (res.length) {
      return res[0].label
    } else return ''
  },
  statusDict: (source) => {
    const options = [
      { label: '筹备中', value: 0 },
      { label: '立项中', value: 1 },
      { label: '实施中', value: 2 },
      { label: '已完结', value: 3 }
    ]
    const res = options.filter(obj => obj.value == source)
    if (res.length) {
      return res[0].label
    } else return ''
  },
  typeDict(source) {
    const options = [
      { label: '科技项目', value: 0 },
      { label: '英才计划', value: 1 },
      { label: '三新三化项目', value: 2 },
      { label: '标准化项目', value: 3 }
    ]
    const res = options.filter(obj => obj.value == source)
    if (res.length) {
      return res[0].label
    } else return ''
  },
  fieldsDict: (source) => {
    const options = [
      { label: 'FPSO', value: 0 },
      { label: '边际油田', value: 1 },
      { label: '系泊', value: 2 },
      { label: 'LNG', value: 3 },
      { label: '非常规', value: 4 },
      { label: '生产技术服务', value: 5 },
      { label: '数字化', value: 6 },
      { label: '其他', value: 7 }
    ]
    const res = options.filter(obj => obj.value == source)
    if (res.length) {
      return res[0].label
    } else return ''
  }
}
export default {
  name: 'basicInformation',
  components: { CardTitle },
  data() {
    return {
      listDict: [
        { label: '项目名称', key: 'projectName' },
        { label: '项目编号', key: 'projectId' },
        { label: '父级项目名称', key: 'parentName' },
        { label: '项目来源', key: 'projectSource' },
        { label: '项目经理/课题负责人', key: 'manager' },
        { label: '承担单位', key: 'unitList', customRender: 'unitRender' },
        { label: '项目周期', key: 'cycleTime' },
        { label: '项目状态', key: 'status', customRender: 'statusDict' },
        { label: '总预算', key: 'budget' },
        { label: '变更后预算', key: 'changeBudget' },
        { label: '已执行费用', key: 'executed' },
        { label: '有无变更', key: 'changeOrNot', customRender: 'tofRender' },
        { label: 'WBS订单号', key: 'wbsId' },
        { label: '下文文号', key: 'contextSymbol' },
        { label: '技术领域', key: 'technicalfield', customRender: 'fieldsDict' },
        { label: '所属专业', key: 'major', customRender: 'fieldsDict' },
        { label: '主要专业', key: 'majorSpecialty', customRender: 'fieldsDict' },
        { label: '次要专业', key: 'minorMajor', customRender: 'fieldsDict' }
      ],
      formData: {
        projectName: '',
        projectId: '',
        parentName: '',
        projectSource: '',
        major: '',
        unitList: '',
        manager: '',
        wbsId: '',
        cycleTime: '',
        status: '',
        budget: ''
      }
    }
  },
  mounted() {
    if (this.$route.query.id) {
      detail({ id: this.$route.query.id }).then(res => {
        console.log(res.data)
        res.data.cycleTime = res.data.cycleStart + '~' + res.data.cycleEnd
        this.formData = res.data
      })
    }
  },
  methods: {
    templateDict(key, data) {
      return dicts[key](data)
    }
  }
}
</script>

<style scoped lang='less'>
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.cell {
  //margin: 8px 0 8px 16px;
  padding: 8px 0 8px 16px;
  border-bottom: solid 1px rgb(232, 232, 232);
}

.grey {
  background: #FAFAFA;
}

.label {
  font-size: 16px;
  //font-weight: 600;
  width: 180px;
}
</style>